<template>
    <div class="charts-info">
        <div v-for="nodeStyle in tagList"
             :key="nodeStyle.key"
             class="charts-info-item">
            <el-tag class="tag"
                    :id="nodeStyle.key"
                    :type="nodeStyle.selected?'success':'info'"
                    @click="filterNodeType"
                    size="small">
                {{nodeStyle.label}}
            </el-tag>
            <span>{{nodeStyle.count}}个</span>
        </div>

    </div>
</template>

<script>
    import d3ClassGetter from "../../assets/javascript/d3ClassGetter";

    export default {
        name: "chartsInfo",
        data() {
            return {
                tagList: d3ClassGetter.nodeStyleList,
                tagSelected: []
            };
        },
        props: {
            filter: {
                type: Function,
                default: null
            }
        },
        mounted() {
            for (let i = 0, len = this.tagList.length; i < len; i++) {
                this.tagSelected.push(true);
            }
        },
        methods: {
            filterNodeType(event) {
                let index = event.target.id;
                this.tagSelected[index] = !this.tagSelected[index];
                this.tagList[index].selected = !this.tagList[index].selected;
                this.filter(this.tagSelected);
            }
        }
    };
</script>

<style scoped>
    .charts-info {
        position: absolute;
        top: 14px;
        right: 14px;
        max-width: 20%;
        z-index: 4;

        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.03);
        padding: 5px;
        user-select: none;
    }

    .charts-info-item {
        display: inline-flex;
        width: 100%;
        margin: 1px auto;
        vertical-align: middle;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
    }

    .tag {
        cursor: pointer;
    }
</style>